<template>
	<view class="uploadFile">
		<view class="buttons">
			<button type="primary" class="ubutton" size="mini" @click="clickUp" :disabled="disabled">上传</button>
		</view>
		<view class="fileList">
			<block v-for="(item,index) in value" :key="item">
				<view class="itemLine">
					<view class="leftName">
						<text>{{item}}</text>
					</view>
					<view class="btns">
						<u-icon name="eye-fill" color="#2979ff" size="26" @click="clickLook(index)"></u-icon>
						<u-icon v-if="!disabled" name="close-circle-fill" color="#2979ff" size="20" @click="clickDel(index)"></u-icon>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {setToken,getAccessToken,getRefreshToken,getTenantId } from '@/utils/auth'
	export default {
		model:{
			prop: 'value', // 此处的value为父组件v-model绑定数据
			event: 'input' // 派发事件，事件名只能是input，否则无法生效
		},
		props:{
			value:'',
			disabled:false,
		},
		computed:{
			valueList(){
				return this.value;  
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			// 点击上传
			clickUp(){
				uni.chooseFile({
					count: 1, //默认100
					success:(res)=>{
						const baseUrl = getApp().globalData.ip;
						const uploadTask = uni.uploadFile({
							url: baseUrl+'/infra/file/upload',
							file:res.tempFiles[0],
							name: 'file',
							header: {
							  'Authorization': getAccessToken()
							},
							success:(res) => {
								let arr = [...this.valueList];
								let data = JSON.parse(res.data);
								arr.push(data.data)
								this.$emit('input',arr)
							},
							fail:(err)=>{
								console.log(err)
							},
						});
					}
				});
			},
			// 点击删除
			clickDel(index){
				let arr = [...this.valueList];
				arr.splice(index,1)
				this.$emit('input',arr)
			},
			// 点击查看
			clickLook(index){
				let url = this.valueList[index];
				uni.navigateTo({
					url:'/pages/common/webview/pdf?url='+url
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.uploadFile{
	width: auto;
	.buttons{
		.ubutton{
			margin: left;
			width: 200rpx;
		}
	}
	.fileList{
		width: 100%;
		// display: flex;
		// overflow: hidden;
		.itemLine{
			width: 100%;
			display: flex;
			overflow: hidden;
			margin-bottom: 20rpx;
			.leftName{
				flex: 1;
				font-size: 24rpx;
				word-break: break-all;
				word-wrap: break-word;
			}
			.btns{
				flex: none;
				width: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
}
</style>
